<template>
  <div class="app-container">
    <div class="filterDiv">
      <el-date-picker v-model="listQuery.queryParam.createDate1" :editable="false" type="date" placeholder="建档开始日期" size="small" :clearable="false" value-format="yyyy-MM-dd" style="width:130px" />
      <span class="zhi">至</span>
      <el-date-picker v-model="listQuery.queryParam.createDate2" :editable="false" type="date" placeholder="建档结束日期" size="small" :clearable="false" value-format="yyyy-MM-dd" style="width:130px" />
      <el-input v-model="listQuery.queryParam.custName" size="small" placeholder="客户代码/名称" style="width: 200px;" />
      <el-input v-model="listQuery.queryParam.area" size="small" placeholder="区域" />
      <el-dropdown trigger="click">
        <span id="dropTit3" class="el-dropdown-link">
          <el-input v-model="listQuery.queryParam.channelTypeName" size="small" placeholder="渠道类型" />
        </span>
        <el-dropdown-menu slot="dropdown" size="small" :visible-change="menuVisible1">
          <div style="width:205px;max-height:260px">
            <el-tree :data="treeData1" :props="defaultProps1" default-expand-all @node-click="handleNodeClick3" />
          </div>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown trigger="click">
        <span id="dropTit4" class="el-dropdown-link">
          <el-input v-model="listQuery.queryParam.custTypeName" size="small" placeholder="客户类别" />
        </span>
        <el-dropdown-menu slot="dropdown" size="small">
          <div style="width:205px;max-height:260px">
            <el-tree :data="treeData2" :props="defaultProps2" default-expand-all @node-click="handleNodeClick4" />
          </div>
        </el-dropdown-menu>
      </el-dropdown>
      <el-button size="small" type="primary" round @click="handleFilter">查询</el-button>
      <el-button size="small" style="float:right" type="primary" round @click="showLine">地图</el-button>
      <el-button v-permiss="['60202690']" size="small" style="float:right;margin-left:10px" round type="primary" @click="printBook">打印</el-button>
      <el-button v-permiss="['60202670']" size="small" type="primary" style="float:right;margin-left:10px" round @click="showImport">导入</el-button>
      <el-button v-permiss="['60202620']" size="small" type="primary" style="float:right;margin-left:10px" round @click="handleAdd">新增</el-button>
    </div>
    <div class="contentDiv">
      <el-table :key="tableKey" v-loading="listLoading" :data="tableData" fit highlight-current-row style="width: 100%;" size="small">
        <el-empty slot="empty" :image-size="120" description="暂无数据" />
        <el-table-column label="序号" type="index" align="center" width="50" />
        <el-table-column label="客户代码" align="center">
          <template slot-scope="{row}">
            <span>{{ row.custCode }}</span>
          </template>
        </el-table-column>
        <el-table-column label="客户名称" align="center">
          <template slot-scope="{row}">
            <span>{{ row.custName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="助记码" align="center">
          <template slot-scope="{row}">
            <span>{{ row.mnemonicCode }}</span>
          </template>
        </el-table-column>
        <el-table-column label="简称" align="center">
          <template slot-scope="{row}">
            <span>{{ row.abbr }}</span>
          </template>
        </el-table-column>
        <el-table-column label="地址" align="center" show-overflow-tooltip>
          <template slot-scope="{row}">
            <span>{{ row.addr }}</span>
          </template>
        </el-table-column>
        <el-table-column label="联系人" align="center">
          <template slot-scope="{row}">
            <span>{{ row.contact }}</span>
          </template>
        </el-table-column>
        <el-table-column label="区域" align="center">
          <template slot-scope="{row}">
            <span>{{ row.area }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电话" align="center" width="100">
          <template slot-scope="{row}">
            <span>{{ row.tel }}</span>
          </template>
        </el-table-column>
        <el-table-column label="微信号" align="center">
          <template slot-scope="{row}">
            <span>{{ row.wechat }}</span>
          </template>
        </el-table-column>
        <el-table-column label="预收余额" align="center" width="100">
          <template slot-scope="{row}">
            <span>{{ row.advrBalance|Fixed }}</span>
          </template>
        </el-table-column>
        <el-table-column label="赊销额度" align="center" width="100">
          <template slot-scope="{row}">
            <span>{{ row.creditLimit|Fixed }}</span>
          </template>
        </el-table-column>
        <el-table-column label="已赊销金额" align="center" width="100">
          <template slot-scope="{row}">
            <span>{{ row.overdraftBalance|Fixed }}</span>
          </template>
        </el-table-column>
        <el-table-column label="纳税人识别号" align="center" width="110">
          <template slot-scope="{row}">
            <span>{{ row.taxRegistrationCertificateNo }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否开票" width="80" align="center">
          <template slot-scope="{row}">
            <span>{{ row.isInvoice==1?'是':'否' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="零售自提" width="80" align="center">
          <template slot-scope="{row}">
            <span>{{ row.isDelivery==0?'是':'否' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否启用" width="80" align="center">
          <template slot-scope="{row}">
            <el-switch v-model="row.isDisable" :active-value="0" :inactive-value="1" @change="updateStatus($event, row)" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="230">
          <template slot-scope="{row}">
            <el-button v-permiss="['60202630']" type="text" size="small" @click="handleCompile(row)">编辑</el-button>
            <el-button v-permiss="['60202660']" type="text" size="small" @click="handleDel(row.id)">删除</el-button>
            <el-button v-permiss="['60202680']" type="text" size="small" @click="handleUpdate(row.overdraftBalance, row.id)">改已赊销金额</el-button>
            <el-button v-permiss="['60202690']" type="text" size="small" @click="printCust(row.id)">打印</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>20" :total="total" :page.sync="listQuery.pageIndex" :limit.sync="listQuery.pageNum" @pagination="getList" />
    </div>
    <el-dialog :close-on-click-modal="false" :title="dialogStatus=='create'?'新增客户':'修改客户'" :visible.sync="dialogVisible" width="995px">
      <el-form ref="dataForm" :rules="rules" :model="form" :inline="true" label-position="right" label-width="95px" style="width: 960px; margin-left:10px;">
        <el-form-item label="客户代码" prop="custCode">
          <el-input v-model="form.custCode" size="small" placeholder="客户代码" style="width:205px" />
        </el-form-item>
        <el-form-item label="客户名称" prop="custName">
          <el-input v-model="form.custName" size="small" placeholder="客户名称" style="width:205px" />
        </el-form-item>
        <el-form-item label="助记码" prop="mnemonicCode">
          <el-input v-model="form.mnemonicCode" size="small" placeholder="助记码" style="width:205px" disabled />
        </el-form-item>
        <el-form-item label="简称" prop="abbr">
          <el-input v-model="form.abbr" size="small" placeholder="简称" style="width:205px" />
        </el-form-item>
        <el-form-item label="联系人" prop="contact">
          <el-input v-model="form.contact" size="small" placeholder="联系人" style="width:205px" />
        </el-form-item>
        <el-form-item label="电话" prop="tel">
          <el-input v-model="form.tel" size="small" placeholder="电话" maxlength="11" style="width:205px" oninput="value=value.replace(/[^\d]/g,'')" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" size="small" placeholder="邮箱" style="width:205px" />
        </el-form-item>
        <el-form-item label="开户行" prop="bankName">
          <el-input v-model="form.bankName" size="small" placeholder="开户行" style="width:205px" />
        </el-form-item>
        <el-form-item label="银行卡账号" prop="bankAccount">
          <el-input v-model="form.bankAccount" size="small" placeholder="银行卡账号" style="width:205px" oninput="value=value.replace(/[^\d]/g,'')" />
        </el-form-item>
        <el-form-item label="微信号" prop="wechat">
          <el-input v-model="form.wechat" size="small" placeholder="微信号" style="width:205px" />
        </el-form-item>
        <el-form-item label="省市区" prop="addr">
          <el-input v-model="form.province" size="small" placeholder="省" style="width:67px" />
          <el-input v-model="form.city" size="small" placeholder="市" style="width:67px" />
          <el-input v-model="form.district" size="small" placeholder="县" style="width:66px" />
        </el-form-item>
        <el-form-item label="地址" prop="addr">
          <el-input v-model="form.addr" size="small" placeholder="地址" style="width:205px" />
        </el-form-item>
        <el-form-item label="区域" prop="area">
          <el-input v-model="form.area" size="small" max-length="8" placeholder="区域" style="width:205px" />
        </el-form-item>
        <el-form-item label="赊销额度" prop="creditLimit" class="question">
          <el-tooltip class="inpright" effect="dark" content="客户允许赊销的额度" placement="bottom">
            <i class="el-icon-question" />
          </el-tooltip>
          <el-input v-model="form.creditLimit" size="small" placeholder="赊销金额" class="inpright" style="width:205px" oninput="value=value.replace(/[^\d.]/g,'')" />
        </el-form-item>
        <el-form-item label="拜访周期(天)" prop="visitCycle">
          <el-input v-model="form.visitCycle" size="small" placeholder="拜访周期" class="inpright" style="width:205px" oninput="value=value.replace(/[^\d]/g,'')" />
        </el-form-item>
        <el-form-item label="渠道类型" prop="bizTypeId">
          <el-dropdown trigger="click">
            <span id="dropTit1" class="el-dropdown-link">
              <el-input v-model="form.channelTypeName" size="small" placeholder="渠道类型" style="width:205px" />
            </span>
            <el-dropdown-menu slot="dropdown" :visible-change="menuVisible1">
              <div style="width:205px;max-height:260px">
                <el-tree :data="treeData1" :props="defaultProps1" default-expand-all @node-click="handleNodeClick1" />
              </div>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item label="客户类别" prop="custTypeId">
          <el-dropdown trigger="click">
            <span id="dropTit2" class="el-dropdown-link">
              <el-input v-model="form.custTypeName" size="small" placeholder="客户类别" style="width:205px" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <div style="width:205px;max-height:260px">
                <el-tree :data="treeData2" :props="defaultProps2" default-expand-all @node-click="handleNodeClick2" />
              </div>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item label="价格组" prop="priceGroupId">
          <el-select v-model="form.priceGroupId" style="width:205px" size="small" class="filter-item" placeholder="价格组">
            <el-option v-for="item in priceGroupList" :key="item.id" :label="item.priceGroupName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="纳税人识别号" prop="taxRegistrationCertificateNo" label-width="100px">
          <el-input v-model="form.taxRegistrationCertificateNo" size="small" placeholder="纳税人识别号" style="width:200px" />
        </el-form-item>
        <el-form-item label="销售人员" prop="remarks">
          <el-select v-model="form.salesMan" style="width:205px" size="small" class="filter-item" placeholder="销售人员">
            <el-option v-for="item in staffList" :key="item.id" :label="item.staffName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="建档日期" prop="remarks">
          <el-date-picker v-model="form.createDate" type="date" placeholder="建档日期" size="small" :clearable="false" value-format="yyyy-MM-dd" style="width:205px" />
        </el-form-item>
        <el-form-item label="每月对账日" prop="remarks">
          <el-select v-model="form.reconciliationDay" placeholder="对账日" size="small" style="width:205px">
            <el-option v-for="item in 31" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="上次对账日期" prop="reconciliationDate" label-width="100px">
          <el-date-picker v-model="form.reconciliationDate" type="date" placeholder="上次对账日期" size="small" disabled value-format="yyyy-MM-dd" style="width:200px" />
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="form.remarks" size="small" placeholder="备注" style="width:205px" />
        </el-form-item>
        <el-form-item label="是否开票" prop="isInvoice" style="margin-right:110px">
          <el-radio v-model="form.isInvoice" :label="1">是</el-radio>
          <el-radio v-model="form.isInvoice" :label="0">否</el-radio>
        </el-form-item>
        <el-form-item label="是否可跳过" prop="isSkip" align="center" label-width="100px" style="margin-right:110px">
          <el-radio v-model="form.isSkip" :label="0">是</el-radio>
          <el-radio v-model="form.isSkip" :label="1">否</el-radio>
        </el-form-item>
        <el-form-item label="零售自提网点" prop="isDelivery" align="center" label-width="100px" style="margin-right:90px">
          <el-radio v-model="form.isDelivery" :label="0">是</el-radio>
          <el-radio v-model="form.isDelivery" :label="1">否</el-radio>
        </el-form-item>
        <el-form-item label="是否启用" prop="isDisable" align="center" label-width="100px">
          <el-radio v-model="form.isDisable" :label="0">是</el-radio>
          <el-radio v-model="form.isDisable" :label="1">否</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogStatus == 'create' ? handleCreate() : handleModify()">确定</el-button>
      </div>
    </el-dialog>
    <import-data ref="importRef" type="cust" title="客户" />
    <el-dialog :close-on-click-modal="false" title="客户地图" :visible.sync="dialogVisible1" width="1000px" top="5%">
      <baidu-map id="allmap" :zoom="15" :center="center" :scroll-wheel-zoom="true" @ready="mapReady" />
    </el-dialog>
  </div>
</template>
<script>
import { getStaff, getCust, saveCust, delCust, updateCustDisabled } from '@/api/basedata'
import { updateOverdraftBalanceById1, getChannelTree, getCustTypeTree, getPriceGroup, printAllCust, printCustById } from '@/api/basedata'
import importData from './importData'
export default {
  name: 'BaseCust',
  components: { importData },
  filters: {
    Fixed: function(num) {
      if (!num) {
        return '0.00'
      }
      return parseFloat(num).toFixed(2)
    }
  },
  data() {
    return {
      tableKey: 0,
      addressCode: {},
      tableData: [],
      treeData1: [],
      treeData2: [],
      priceGroupList: [],
      defaultProps1: {
        children: 'children',
        label: 'channelTypeName'
      },
      defaultProps2: {
        children: 'children',
        label: 'custTypeName'
      },
      menuVisible1: false,
      dialogVisible1: false,
      total: 0,
      listLoading: true,
      staffList: [],
      listQuery: {
        pageIndex: 1,
        pageNum: 20,
        queryParam: {
          createDate1: '',
          createDate2: '',
          area: '',
          custCode: '',
          custName: '',
          channelTypeId: '',
          custTypeId: ''
        }
      },
      form: {
        id: '',
        custName: '',
        addr: '',
        abbr: '',
        contact: '',
        bankName: '',
        bankAccount: '',
        wechat: '',
        email: '',
        tel: '',
        custCode: '',
        creditLimit: '',
        visitCycle: '',
        mnemonicCode: '',
        channelTypeId: '',
        channelTypeName: '',
        custTypeId: '',
        province: '',
        city: '',
        area: '',
        district: '',
        salesMan: '',
        createDate: '',
        priceGroupId: '',
        custTypeName: '',
        isInvoice: 0,
        isSkip: 1,
        reconciliationDay: '',
        reconciliationDate: '',
        taxRegistrationCertificateNo: '',
        remarks: '',
        isDisable: 0,
        isDelivery: 1
      },
      resetform: {
        id: '',
        custName: '',
        addr: '',
        abbr: '',
        contact: '',
        bankName: '',
        bankAccount: '',
        wechat: '',
        email: '',
        tel: '',
        custCode: '',
        creditLimit: '',
        visitCycle: '',
        mnemonicCode: '',
        channelTypeId: '',
        channelTypeName: '',
        custTypeId: '',
        province: '',
        city: '',
        area: '',
        district: '',
        salesMan: '',
        createDate: '',
        priceGroupId: '',
        custTypeName: '',
        isInvoice: 0,
        isSkip: 1,
        reconciliationDay: '',
        reconciliationDate: '',
        taxRegistrationCertificateNo: '',
        remarks: '',
        isDisable: 0,
        isDelivery: 1
      },
      dialogVisible: false,
      dialogStatus: '',
      center: { lng: 114.0, lat: 22.55 },
      rules: {
        custCode: [
          { required: true, message: '代码不能为空', trigger: 'change' }
        ],
        custName: [
          { required: true, message: '名称不能为空', trigger: 'change' }
        ],
        mnemonicCode: [
          { required: false, message: '助记码不能为空', trigger: 'change' }
        ],
        abbr: [{ required: false, message: '简称不能为空', trigger: 'change' }]
      }
    }
  },
  mounted() {
    this.getList()
    this.getTree()
    getStaff().then((res) => {
      this.staffList = res.data.data || []
    })
  },
  methods: {
    showImport() {
      this.$refs.importRef.option = {
        show: true
      }
    },
    printBook() {
      printAllCust().then((res) => {
        window.open('http://' + window.location.host + res.data.data)
      }).catch(() => {
        this.listLoading = false
      })
    },
    printCust(id) {
      printCustById({ id }).then((res) => {
        window.open('http://' + window.location.host + res.data.data)
      }).catch(() => {
        this.listLoading = false
      })
    },
    mapReady({ BMap, map }) {
      var points = [
        { lng: 114.001, lat: 22.55 },
        { lng: 114.002, lat: 22.55 },
        { lng: 114.003, lat: 22.55 },
        { lng: 114.004, lat: 22.55 },
        { lng: 114.005, lat: 22.55 },
        { lng: 114.006, lat: 22.55 },
        { lng: 114.007, lat: 22.55 },
        { lng: 114.008, lat: 22.55 },
        { lng: 114.009, lat: 22.55 }
      ]
      points.forEach((item, index) => {
        var point = new BMap.Point(item.lng, item.lat)
        const icon = new BMap.Icon('http://api.map.baidu.com/img/markers.png', new BMap.Size(23, 25),
          {
            offset: new BMap.Size(10, 25),
            imageOffset: new BMap.Size(0, 0 - index * 25)
          }
        )
        var marker = new BMap.Marker(point, { icon })
        map.addOverlay(marker)
      })
    },
    showLine() {
      this.dialogVisible1 = true
    },
    areaData(data) {
      this.form.province = data.split('-')[0]
      this.form.city = data.split('-')[1]
      this.form.area = data.split('-')[2]
    },
    handleNodeClick1(e) {
      if (e.leaf == 1) {
        document.getElementById('dropTit1').click()
        this.form.channelTypeName = e.channelTypeName
        this.form.channelTypeId = e.id
      }
    },
    handleNodeClick2(e) {
      if (e.leaf == 1) {
        document.getElementById('dropTit2').click()
        this.form.custTypeName = e.custTypeName
        this.form.custTypeId = e.id
      }
    },
    handleNodeClick3(e) {
      document.getElementById('dropTit3').click()
      this.$set(this.listQuery.queryParam, 'channelTypeName', e.channelTypeName)
      this.$set(this.listQuery.queryParam, 'channelTypeId', e.id)
    },
    handleNodeClick4(e) {
      document.getElementById('dropTit4').click()
      this.$set(this.listQuery.queryParam, 'custTypeName', e.custTypeName)
      this.$set(this.listQuery.queryParam, 'custTypeId', e.id)
    },
    getList() {
      this.listLoading = true
      getCust(this.listQuery).then((res) => {
        this.listLoading = false
        this.tableData = res.data.data || []
        this.total = res.data.totalNum || 0
      }).catch(() => {
        this.listLoading = false
      })
    },
    getTree() {
      getChannelTree({ parentId: null, includeRoot: 0 }).then((res) => {
        this.treeData1 = res.data.data
      })
      getCustTypeTree({ parentId: null, includeRoot: 0 }).then((res) => {
        this.treeData2 = res.data.data
      })
      getPriceGroup({}).then((res) => {
        this.priceGroupList = res.data.data
      })
    },
    handleAdd(obj) {
      this.dialogVisible = true
      this.dialogStatus = 'create'
      for (var key in this.form) {
        this.form[key] = this.resetform[key]
      }
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    handleCompile(obj) {
      this.dialogVisible = true
      this.dialogStatus = 'update'
      for (var key in this.form) {
        this.form[key] = obj[key]
      }
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    handleFilter() {
      this.listQuery.pageIndex = 1
      this.getList()
    },
    handleDel(id) {
      this.$confirm('确定删除？', '提示', {
        confirmButtonText: '确定',
        closeOnClickModal: false,
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delItem(id)
      })
    },
    updateStatus(e, row) {
      this.changeAvaiable(e, row.id)
    },
    changeAvaiable(isDisable, id) {
      var obj = { isDisable, id }
      updateCustDisabled(obj).then((res) => {
        if (res.data.errorCode === '0') {
          this.$message.success(res.data.msg)
        }
      })
    },
    handleModify() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          saveCust(this.form).then((res) => {
            if (res.data.errorCode === '0') {
              this.getList()
              this.dialogVisible = false
              this.$message.success(res.data.msg)
            }
          })
        }
      })
    },
    handleCreate() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          saveCust(this.form).then((res) => {
            if (res.data.errorCode === '0') {
              this.getList()
              this.dialogVisible = false
              this.$message.success(res.data.msg)
            }
          })
        }
      })
    },
    handleUpdate(val, id) {
      this.$prompt('已赊销金额(元)', '修改已赊销金额', {
        confirmButtonText: '确定',
        closeOnClickModal: false,
        cancelButtonText: '取消',
        inputValue: val ? parseFloat(val).toFixed(2) : '0.0',
        inputType: 'text',
        inputPattern: /^\d+$|^\d*\.\d*$/,
        inputErrorMessage: '格式不正确'
      }).then(({ value }) => {
        this.updateValue(id, value)
      }).catch(() => {})
    },
    updateValue(id, value) {
      var obj = { id: id, overdraftBalance: value }
      updateOverdraftBalanceById1(obj).then((res) => {
        if (res.data.errorCode === '0') {
          this.getList()
          this.$message.success(res.data.msg)
        }
      })
    },
    delItem(id) {
      delCust(id).then((res) => {
        if (res.data.errorCode === '0') {
          this.getList()
          this.dialogVisible = false
          this.$message.success(res.data.msg)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/.el-form-item {
  margin-bottom: 18px;
}
>>> .el-form-item__label {
  line-height: 32px;
}
>>> .el-form-item__content {
  line-height: 32px;
}
</style>
<style scoped>
.app-container {
  min-width: 1220px;
}
#allmap {
  width: 960px;
  height: 600px;
  margin: 0 auto;
}
.fileDiv {
  width: 400px;
  height: 60px;
  border: 1px #d0d0d0 solid;
  line-height: 60px;
  text-align: center;
  border-radius: 6px;
}
.filter-item {
  position: relative;
}
</style>
